<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端面试题宝典 - 模拟面经</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }

        .filters {
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .filter-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .filter-group label {
            font-weight: 600;
            color: #555;
            font-size: 0.9rem;
        }

        .filter-group select,
        .filter-group input {
            padding: 10px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
        }

        .filter-group select:focus,
        .filter-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .search-box {
            flex: 1;
            min-width: 200px;
        }

        .search-box input {
            width: 100%;
        }

        .question-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .question-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .question-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .question-number {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .question-difficulty {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .difficulty-easy {
            background: #d4edda;
            color: #155724;
        }

        .difficulty-medium {
            background: #fff3cd;
            color: #856404;
        }

        .difficulty-hard {
            background: #f8d7da;
            color: #721c24;
        }

        .question-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .question-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }

        .tag {
            background: #f8f9fa;
            color: #495057;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            border: 1px solid #e9ecef;
        }

        .question-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #666;
        }

        .question-type {
            background: #e3f2fd;
            color: #1976d2;
            padding: 3px 8px;
            border-radius: 8px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 40px;
        }

        .pagination button {
            padding: 10px 15px;
            border: 2px solid #e1e5e9;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .pagination button:hover:not(:disabled) {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }

        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination .active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .no-results {
            text-align: center;
            padding: 60px 20px;
            color: #666;
            font-size: 1.1rem;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .header h1 {
                font-size: 2rem;
            }

            .stats {
                gap: 15px;
            }

            .stat-card {
                padding: 15px;
            }

            .filter-row {
                flex-direction: column;
                align-items: stretch;
            }

            .question-grid {
                grid-template-columns: 1fr;
            }

            .question-card {
                padding: 20px;
            }
        }

        .category-badge {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎯 前端面试题宝典</h1>
            <p>模拟面经 - 1669道精选题目，助你面试成功！</p>
        </div>

        <div class="stats">
            <div class="stat-card">
                <div class="stat-number" id="totalQuestions">1669</div>
                <div class="stat-label">总题目数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="filteredQuestions">1669</div>
                <div class="stat-label">当前显示</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="categories">8</div>
                <div class="stat-label">技术分类</div>
            </div>
        </div>

        <div class="filters">
            <div class="filter-row">
                <div class="filter-group search-box">
                    <label for="searchInput">🔍 搜索题目</label>
                    <input type="text" id="searchInput" placeholder="输入关键词搜索题目...">
                </div>
                <div class="filter-group">
                    <label for="categoryFilter">📂 技术分类</label>
                    <select id="categoryFilter">
                        <option value="">全部分类</option>
                        <option value="JavaScript">JavaScript (400题)</option>
                        <option value="React">React.js (146题)</option>
                        <option value="Vue">Vue.js (109题)</option>
                        <option value="CSS">CSS (111题)</option>
                        <option value="HTML">HTML (75题)</option>
                        <option value="算法">算法 (22题)</option>
                        <option value="计算机网络">计算机网络 (102题)</option>
                        <option value="Node.js">Node.js (39题)</option>
                        <option value="TypeScript">TypeScript (60题)</option>
                        <option value="性能优化">性能优化 (48题)</option>
                        <option value="前端安全">前端安全 (33题)</option>
                        <option value="小程序">小程序 (12题)</option>
                        <option value="ES6">ES6 (48题)</option>
                        <option value="编程题">编程题 (130题)</option>
                        <option value="设计模式">设计模式 (7题)</option>
                        <option value="工程化">工程化 (71题)</option>
                        <option value="工具">工具 (39题)</option>
                        <option value="计算机基础">计算机基础 (19题)</option>
                        <option value="LeetCode">LeetCode (36题)</option>
                        <option value="选择题">选择题 (154题)</option>
                        <option value="跨端技术">跨端技术 (11题)</option>
                        <option value="场景题">场景题 (71题)</option>
                        <option value="AI相关">AI相关 (14题)</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="difficultyFilter">⚡ 难度等级</label>
                    <select id="difficultyFilter">
                        <option value="">全部难度</option>
                        <option value="easy">初级</option>
                        <option value="medium">中级</option>
                        <option value="hard">高级</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="typeFilter">📝 题目类型</label>
                    <select id="typeFilter">
                        <option value="">全部类型</option>
                        <option value="问答题">问答题</option>
                        <option value="选择题">选择题</option>
                        <option value="编程题">编程题</option>
                        <option value="场景题">场景题</option>
                    </select>
                </div>
            </div>
        </div>

        <div id="questionGrid" class="question-grid">
            <div class="loading">正在加载题目...</div>
        </div>

        <div class="pagination" id="pagination">
            <!-- 分页按钮将通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        // 题目数据生成器
        class QuestionGenerator {
            constructor() {
                this.categories = {
                    'JavaScript': 400,
                    'React': 146,
                    'Vue': 109,
                    'CSS': 111,
                    'HTML': 75,
                    '算法': 22,
                    '计算机网络': 102,
                    'Node.js': 39,
                    'TypeScript': 60,
                    '性能优化': 48,
                    '前端安全': 33,
                    '小程序': 12,
                    'ES6': 48,
                    '编程题': 130,
                    '设计模式': 7,
                    '工程化': 71,
                    '工具': 39,
                    '计算机基础': 19,
                    'LeetCode': 36,
                    '选择题': 154,
                    '跨端技术': 11,
                    '场景题': 71,
                    'AI相关': 14
                };

                this.difficulties = ['easy', 'medium', 'hard'];
                this.types = ['问答题', '选择题', '编程题', '场景题'];
                this.questions = [];
                this.currentPage = 1;
                this.questionsPerPage = 12;
                this.filteredQuestions = [];
            }

            generateQuestions() {
                let questionId = 1;
                
                for (const [category, count] of Object.entries(this.categories)) {
                    for (let i = 0; i < count; i++) {
                        const difficulty = this.difficulties[Math.floor(Math.random() * this.difficulties.length)];
                        const type = this.types[Math.floor(Math.random() * this.types.length)];
                        
                        this.questions.push({
                            id: questionId++,
                            title: this.generateQuestionTitle(category, type, i + 1),
                            category: category,
                            difficulty: difficulty,
                            type: type,
                            tags: this.generateTags(category),
                            description: this.generateDescription(category, type),
                            answer: this.generateAnswer(category, type),
                            createdAt: this.generateRandomDate()
                        });
                    }
                }
                
                this.filteredQuestions = [...this.questions];
                this.renderQuestions();
                this.renderPagination();
            }

            generateQuestionTitle(category, type, index) {
                const titles = {
                    'JavaScript': [
                        'JavaScript中的闭包是什么？如何正确使用？',
                        '解释JavaScript的事件循环机制',
                        'JavaScript中的this指向问题详解',
                        'Promise和async/await的区别与使用场景',
                        'JavaScript内存泄漏的原因及解决方案',
                        'JavaScript中的原型链是如何工作的？',
                        '解释JavaScript的变量提升现象',
                        'JavaScript中的深拷贝和浅拷贝',
                        'JavaScript模块化的发展历程',
                        'JavaScript中的防抖和节流函数'
                    ],
                    'React': [
                        'React中的虚拟DOM是什么？如何工作？',
                        'React Hooks的使用规则和最佳实践',
                        'React中的状态管理方案对比',
                        'React性能优化的常用方法',
                        'React中的生命周期方法详解',
                        'React Router的使用和原理',
                        'React中的受控组件和非受控组件',
                        'React中的Context API使用场景',
                        'React中的错误边界如何处理？',
                        'React中的高阶组件(HOC)是什么？'
                    ],
                    'Vue': [
                        'Vue 2和Vue 3的主要区别是什么？',
                        'Vue中的响应式原理是如何实现的？',
                        'Vue中的组件通信方式有哪些？',
                        'Vuex和Pinia的区别与使用场景',
                        'Vue中的生命周期钩子详解',
                        'Vue中的指令系统是如何工作的？',
                        'Vue中的计算属性和侦听器的区别',
                        'Vue中的插槽(Slot)使用场景',
                        'Vue中的路由守卫如何使用？',
                        'Vue中的组件懒加载实现方式'
                    ],
                    'CSS': [
                        'CSS盒模型的标准模式和怪异模式',
                        'CSS中的BFC(块级格式化上下文)是什么？',
                        'CSS Flexbox布局的常用属性',
                        'CSS Grid布局的使用方法',
                        'CSS中的层叠上下文和层叠顺序',
                        'CSS动画和过渡的区别',
                        'CSS中的媒体查询使用场景',
                        'CSS预处理器(Sass/Less)的优势',
                        'CSS中的伪类和伪元素区别',
                        'CSS中的定位方式详解'
                    ],
                    'HTML': [
                        'HTML5新增的语义化标签有哪些？',
                        'HTML中的DOCTYPE声明的作用',
                        'HTML中的meta标签常用属性',
                        'HTML中的表单验证方法',
                        'HTML中的Canvas和SVG区别',
                        'HTML中的Web Components是什么？',
                        'HTML中的无障碍访问(A11y)规范',
                        'HTML中的SEO优化要点',
                        'HTML中的微数据(Microdata)使用',
                        'HTML中的Web Storage API'
                    ],
                    '算法': [
                        '实现一个快速排序算法',
                        '两数之和问题的多种解法',
                        '链表反转的迭代和递归实现',
                        '二叉树的前中后序遍历',
                        '动态规划解决背包问题',
                        '字符串匹配算法KMP实现',
                        '图的深度优先和广度优先遍历',
                        '堆排序算法的实现原理',
                        '二分查找的边界条件处理',
                        '滑动窗口算法解决子数组问题'
                    ],
                    '计算机网络': [
                        'HTTP和HTTPS的区别是什么？',
                        'TCP和UDP协议的特点对比',
                        'HTTP/2相比HTTP/1.1的改进',
                        'DNS解析的完整过程',
                        'CDN的工作原理和优势',
                        'WebSocket和HTTP的区别',
                        'HTTPS的SSL/TLS握手过程',
                        'HTTP状态码的含义和使用场景',
                        'RESTful API的设计原则',
                        '跨域问题的解决方案'
                    ],
                    '性能优化': [
                        '前端性能优化的常用方法',
                        '图片懒加载的实现原理',
                        '代码分割和按需加载策略',
                        '浏览器缓存机制详解',
                        '首屏加载时间优化方案',
                        'JavaScript性能优化技巧',
                        'CSS性能优化最佳实践',
                        'Webpack打包优化策略',
                        '移动端性能优化要点',
                        '监控和测量性能的方法'
                    ]
                };

                const categoryTitles = titles[category] || [`${category}相关题目${index}`];
                return categoryTitles[index % categoryTitles.length];
            }

            generateTags(category) {
                const tagMap = {
                    'JavaScript': ['ES6', '异步编程', '闭包', '原型链'],
                    'React': ['Hooks', '虚拟DOM', '状态管理', '性能优化'],
                    'Vue': ['响应式', '组件', '路由', '状态管理'],
                    'CSS': ['布局', '动画', '响应式', '预处理器'],
                    'HTML': ['语义化', 'SEO', '无障碍', 'Web Components'],
                    '算法': ['数据结构', '排序', '搜索', '动态规划'],
                    '计算机网络': ['HTTP', 'TCP', 'DNS', '缓存'],
                    '性能优化': ['加载优化', '渲染优化', '打包优化', '监控']
                };

                const baseTags = tagMap[category] || [category];
                const additionalTags = ['面试题', '前端', '技术'];
                return [...baseTags, ...additionalTags].slice(0, 4);
            }

            generateDescription(category, type) {
                return `这是一道关于${category}的${type}，考察相关技术点的深度理解和实际应用能力。`;
            }

            generateAnswer(category, type) {
                return `这是${category}相关${type}的详细解答，包含核心概念、实现原理和最佳实践。`;
            }

            generateRandomDate() {
                const start = new Date(2023, 0, 1);
                const end = new Date();
                return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
            }

            filterQuestions() {
                const searchTerm = document.getElementById('searchInput').value.toLowerCase();
                const category = document.getElementById('categoryFilter').value;
                const difficulty = document.getElementById('difficultyFilter').value;
                const type = document.getElementById('typeFilter').value;

                this.filteredQuestions = this.questions.filter(question => {
                    const matchesSearch = question.title.toLowerCase().includes(searchTerm) ||
                                       question.tags.some(tag => tag.toLowerCase().includes(searchTerm));
                    const matchesCategory = !category || question.category === category;
                    const matchesDifficulty = !difficulty || question.difficulty === difficulty;
                    const matchesType = !type || question.type === type;

                    return matchesSearch && matchesCategory && matchesDifficulty && matchesType;
                });

                this.currentPage = 1;
                this.renderQuestions();
                this.renderPagination();
                this.updateStats();
            }

            renderQuestions() {
                const grid = document.getElementById('questionGrid');
                const startIndex = (this.currentPage - 1) * this.questionsPerPage;
                const endIndex = startIndex + this.questionsPerPage;
                const questionsToShow = this.filteredQuestions.slice(startIndex, endIndex);

                if (questionsToShow.length === 0) {
                    grid.innerHTML = '<div class="no-results">🔍 没有找到符合条件的题目</div>';
                    return;
                }

                grid.innerHTML = questionsToShow.map(question => `
                    <div class="question-card" onclick="questionGenerator.showQuestionDetail(${question.id})">
                        <div class="question-header">
                            <div class="question-number">#${question.id}</div>
                            <div class="question-difficulty difficulty-${question.difficulty}">
                                ${this.getDifficultyText(question.difficulty)}
                            </div>
                        </div>
                        <div class="question-title">${question.title}</div>
                        <div class="question-tags">
                            <span class="category-badge">${question.category}</span>
                            ${question.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                        </div>
                        <div class="question-meta">
                            <span class="question-type">${question.type}</span>
                            <span>${question.createdAt.toLocaleDateString()}</span>
                        </div>
                    </div>
                `).join('');
            }

            renderPagination() {
                const totalPages = Math.ceil(this.filteredQuestions.length / this.questionsPerPage);
                const pagination = document.getElementById('pagination');

                if (totalPages <= 1) {
                    pagination.innerHTML = '';
                    return;
                }

                let paginationHTML = '';
                
                // 上一页按钮
                paginationHTML += `
                    <button ${this.currentPage === 1 ? 'disabled' : ''} 
                            onclick="questionGenerator.goToPage(${this.currentPage - 1})">
                        上一页
                    </button>
                `;

                // 页码按钮
                const startPage = Math.max(1, this.currentPage - 2);
                const endPage = Math.min(totalPages, this.currentPage + 2);

                if (startPage > 1) {
                    paginationHTML += `<button onclick="questionGenerator.goToPage(1)">1</button>`;
                    if (startPage > 2) {
                        paginationHTML += `<button disabled>...</button>`;
                    }
                }

                for (let i = startPage; i <= endPage; i++) {
                    paginationHTML += `
                        <button class="${i === this.currentPage ? 'active' : ''}" 
                                onclick="questionGenerator.goToPage(${i})">
                            ${i}
                        </button>
                    `;
                }

                if (endPage < totalPages) {
                    if (endPage < totalPages - 1) {
                        paginationHTML += `<button disabled>...</button>`;
                    }
                    paginationHTML += `<button onclick="questionGenerator.goToPage(${totalPages})">${totalPages}</button>`;
                }

                // 下一页按钮
                paginationHTML += `
                    <button ${this.currentPage === totalPages ? 'disabled' : ''} 
                            onclick="questionGenerator.goToPage(${this.currentPage + 1})">
                        下一页
                    </button>
                `;

                pagination.innerHTML = paginationHTML;
            }

            goToPage(page) {
                const totalPages = Math.ceil(this.filteredQuestions.length / this.questionsPerPage);
                if (page >= 1 && page <= totalPages) {
                    this.currentPage = page;
                    this.renderQuestions();
                    this.renderPagination();
                }
            }

            showQuestionDetail(questionId) {
                const question = this.questions.find(q => q.id === questionId);
                if (question) {
                    alert(`题目详情：\n\n${question.title}\n\n分类：${question.category}\n难度：${this.getDifficultyText(question.difficulty)}\n类型：${question.type}\n\n描述：${question.description}\n\n答案：${question.answer}`);
                }
            }

            getDifficultyText(difficulty) {
                const difficultyMap = {
                    'easy': '初级',
                    'medium': '中级',
                    'hard': '高级'
                };
                return difficultyMap[difficulty] || difficulty;
            }

            updateStats() {
                document.getElementById('filteredQuestions').textContent = this.filteredQuestions.length;
            }
        }

        // 初始化
        const questionGenerator = new QuestionGenerator();

        // 页面加载完成后生成题目
        document.addEventListener('DOMContentLoaded', function() {
            questionGenerator.generateQuestions();
            
            // 绑定搜索和筛选事件
            document.getElementById('searchInput').addEventListener('input', 
                debounce(() => questionGenerator.filterQuestions(), 300));
            document.getElementById('categoryFilter').addEventListener('change', 
                () => questionGenerator.filterQuestions());
            document.getElementById('difficultyFilter').addEventListener('change', 
                () => questionGenerator.filterQuestions());
            document.getElementById('typeFilter').addEventListener('change', 
                () => questionGenerator.filterQuestions());
        });

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }
    </script>
</body>
</html>
